<!-- 下拉菜单 -->
<template>
	<view class="u-select" id="u-select">
		<view :class="['u-select-item',{'u-select-item-selected':data.checked,'u-select-item-isvalue':data.isvalue}]" @click.stop="selectItem()">
			<text>{{value.name}}</text>
			<icon class="iconfont icon">&#xe77e;</icon>
		</view>
	</view>
	<!-- 服务分类 -->
	<uni-popup ref="popup" type="top" class="removal" @change="popupChange" :popupTop="data.popupTop" :popupZIndex="9">
		<view class="content">
			<view class="item" v-for="(item,index) in list" :key="index" @click.stop="change(item)">
				<text :class="[{'text-selected':item.value==data.value}]">{{item.name}}</text>
			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import { ref, reactive, computed, watch, getCurrentInstance } from 'vue';
	const _this = getCurrentInstance();
	const emits = defineEmits(['callback']);
	const popup = ref(null);
	const props_data = defineProps({
		type: {
			type: String
		},
		value: {
			type: Object
		},
		list: {
			type: Array
		}
	});
	watch(() => props_data.value, (newVal) => {
		data.isvalue = ['all', 'default',0].indexOf(newVal.value) < 0;
	});
	const data = reactive({
		checked: false,
		value: props_data.list[0] && props_data.list[0].value,
		popupTop: 0,
		isvalue: false
	});
	async function selectItem() {
		const res = await selectorQuery();
		data.popupTop = `${res.top+res.height}px`;
		if (!data.checked) popup.value.open();
		else popup.value.close();
		uni.$once('pageScroll',()=>{
			if(popup.value) popup.value.close();
		})
	}
	// 获取节点参数
	function selectorQuery() {
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(_this);
			query.select('#u-select').boundingClientRect(res => {
				resolve({
					height: res.height,
					top: res.top
				});
			}).exec();
		})
	}
	// 选中某项
	function change(item) {
		data.value = item.value;
		popup.value.close();
		emits('callback', { ...item, type: props_data.type });
	}

	function popupChange(e) {
		data.checked = e.show;
		if (e.show) {
			uni.$emit('openPopup', `SELECT_${props_data.type}`);
			uni.$once('openPopup', (res) => {
				if (res != `SELECT_${props_data.type}` && popup.value) popup.value.close();
			})
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.u-select {
		position: relative;
		z-index: 99999;
		height: 80rpx;
		background-color: #F3F5F7;
	}
	.u-select-item {
		@include flex(row, center);
		height: 80rpx;
		text {
			font-size: 28rpx;
			color: #666;
		}
		.icon {
			margin-left: 6rpx;
			font-size: 28rpx;
			color: #aaa;
		}
		&-selected {
			text {
				color: $color;
			}
			.icon {
				transform: rotate(180deg);
				color: $color;
			}
		}
		&-isvalue {
			text,.icon {
				color: $color;
			}
		}
	}
	.content {
		padding: 0 34rpx;
		background-color: #fff;
		.item {
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #eee;
			text-align: center;
			font-size: 30rpx;
			color: #333;
			.text-selected {
				font-weight: 700;
				color: $color;
			}
		}
	}
</style>
